<template>
  <div class="border-b border-gray-200 bg-white shadow-xs">
    <div class="container mx-auto px-10 py-2 flex justify-between items-center">
      <!-- 左侧导航 -->
      <div class="flex items-center">
        <button @click="$router.push('/index')"
          class="text-red-500 hover:text-red-600 transition-colors mr-4 flex items-center bg-transparent border-none cursor-pointer">
          <span class="font-bold text-lg">Logo</span>
          <span class="ml-2">首页</span>
        </button>

        <div class="flex items-center border-l border-gray-300 pl-4">
          <span class="text-gray-700 flex items-center">
            <i class="fa fa-map-marker text-red-500 mr-1"></i>
            黑龙江
          </span>

          <div class="border-l border-gray-300 ml-4 pl-4 flex items-center">
            <button @click="$router.push('/passport/login')"
              class="text-gray-700 hover:text-red-500 transition-colors bg-transparent border-none cursor-pointer">
              你好，
              <span class="text-red-500 font-medium">{{ userAccount || '请登录' }}</span>
            </button>
            <span class="mx-2 text-gray-300" v-show="userAccount == undefined"> | </span>
            <button @click="handleRegister" v-show="userAccount == undefined"
              class="text-gray-700 hover:text-red-500 transition-colors bg-transparent border-none cursor-pointer">
              免费注册
            </button>
          </div>
        </div>
      </div>

      <!-- 右侧导航 -->
      <div class="flex items-center">
        <button @click="$router.push('/cart')"
          class="text-gray-700 hover:text-red-500 transition-colors flex items-center mr-4 bg-transparent border-none cursor-pointer">
          <i class="fa fa-shopping-cart mr-1"></i>
          <span>购物车</span>
          <span class="ml-1 bg-red-500 text-white text-xs rounded-full h-5 w-5 flex items-center justify-center">{{
            cartCount }}</span>
        </button>

        <button @click="$router.push('/order')"
          class="text-gray-700 hover:text-red-500 transition-colors flex items-center mr-4 bg-transparent border-none cursor-pointer">
          <i class="fa fa-list mr-1"></i>
          <span>订单</span>
        </button>
        <!-- 
        <button @click="$router.push('/user')"
          class="text-gray-700 hover:text-red-500 transition-colors flex items-center bg-transparent border-none cursor-pointer">
          <i class="fa fa-user mr-1"></i>
          <span>个人中心</span>
        </button> -->
      </div>
    </div>
  </div>
</template>

<script setup>
import { getCartCountApi } from '@/apis/cart';
import { onMounted, ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const route = useRoute();
const router = useRouter();
const userAccount = ref('')
let cartCount = ref()
onMounted(() => {
  userAccount.value = localStorage.getItem('userAct')
  getCartCount()
})
const getCartCount = async () => {
  try {
    let res = await getCartCountApi()
    cartCount.value = res.data
  } catch (error) {
    ElMessage.error('获取订单数据失败');
  }
}
const handleRegister = () => {
  // 注册逻辑
  console.log('跳转到注册页面');
  router.push('/passport/register'); // 假设注册路由路径为 /register
};
</script>

<style lang="scss" scoped>
.top-bar {
  button {
    padding: 0 .7rem;
    cursor: pointer;
    transition: color 0.3s;

    &:hover {
      color: red;
    }
  }
}

.divider {
  width: 0.5px;
  height: 1.2rem;
  background-color: #d1d5db;
  margin: 0 0.5rem;
}
</style>